<template>
  <div @click="do_closeSelect">
    <div class="head-all" ><cmHeader id="2"></cmHeader></div>
    <div class="banner f-tb"><div>收藏</div> <div>Collect</div></div>
    <div class="minWidth headerWrapper ">
      <div class="qureywrapper " >
        <ul>
          <li @click.stop="do_getSearchList" v-text='queryTarg'> </li>
          <li v-for="(item,index) in navSearchList" :key='index' v-text='item' v-show='getSearchList' @click.stop='def_getTarget(item)'>

          </li>

        </ul>
        <span class="input"><input type="text" placeholder="请输入你要搜索的内容" v-model="queryText"></span>
        <span class="icon f-zhong" @click="do_query"><img src="../../assets/Home/sousuo.png" alt="" ></span>
      </div>
    </div>
    <!--选择2-->
    <div class="minWidth selectContent-bottom">
      <ul class="flex">
        <li class="flex1 text-center relt" v-for="(item,index) in selectListL" :key="index" :class="selectOtherIndex==index?'selectOtherClass':''">
          <span v-text="item" @click.stop="do_selectOther(item,index)" ></span>
          <span class="iconfont icon-xiala" :class="IsDesc[index]?'xia':'shang'"></span>
        </li>
      </ul>


    </div>
    <div class="textMiddle minWidth f-bian"> <span>共有 <span style="color: #418DFD">{{number}}</span>个相关 </span>
    </div>
    <!--查询结果-->
    <noData v-if="noDataShow"></noData>
    <queryCollectList  ></queryCollectList>
    <doPage @getCurPage="getCurPage($event)" :pages="pages"></doPage>
    <!--页脚-->
    <div class="foot ">
      <zcFooter></zcFooter>
    </div>

  </div>

</template>

<script>
  import cmHeader from '../common/cm_header'
  import zcFooter from '../common/zcFooter'
  import queryCollectList from '../common/cm_query-collect'
  import doPage from '../common/cm_doPage'
  import noData from '../common/cmNodata_model'

    export default {
        name: "yw_cgkCollect",
      inject:['reload'],
      components:{
        cmHeader,
        queryCollectList,
        zcFooter,
        doPage,
        noData

      },
      data(){
          return{
            noDataShow:false,
            compareData:[],//对比数据
            needCompare: true,
            iscompare: false,
            compareNumber:0,
            queryText: '',
            navSearchList: [],
            selectListL: [
              '发表时间', '点击数', '下载量', '用户评价'
            ],
            getSearchList: false,
            queryTarg: '',
            selectOtherIndex: '0',
            number:0,  //多大相关
            page:1,
            pages:0,
            IsDesc:[false,false,false,false],  //是否倒序
            queryStr:{}  //查询条件
          }
      },
      created(){
        window.scrollTo(0,0)
        this.get_selectList() //获取查询列表
        this.do_query()       //查询
      },
      methods:{
        do_closeSelect(){
          this.getSearchList=false
        },
        do_getSearchList() {
          let me = this;
          me.getSearchList = !me.getSearchList
        },
        def_getTarget(item) {
          let me = this;
          me.queryTarg = item;
          me.getSearchList = !me.getSearchList
        },
        do_selectOther(item, index) {
          this.selectOtherIndex = index
          // this.selectOtherIndex = index
          this.$set(this.IsDesc,index,!this.IsDesc[index])
          this.do_query()
        },
        get_selectList() {//下拉选择列表
          let me = this;
          me.$ZcPublic.zcServer.Post({
            IsNeedLogin: 'false',
            Paras: {
              Name: 'Vue_resultLib',
              action: "getQueryTextModel_ResultShow",
              Data: {}
            },
            Callback: me.cb_get_selectList,
            Scope: me,
          });
        },
        cb_get_selectList(resJson, scoped) {
          console.log('下拉选择收藏', resJson)
          if (resJson.success) {
            this.navSearchList = resJson.data
            if (this.queryTarg !== this.navSearchList[0] && this.queryTarg !== '') {
              return
            } else {
              this.queryTarg = this.navSearchList[0]
            }

          } else {
            this.$confirm({
              type:"错误",
              msg:resJson.msg,
              btn:{
                ok:'ok'
              }
            })
          }
        },
        do_queryCommon(){
          let me = this;
          me.$ZcPublic.zcServer.Post({
            IsNeedLogin: 'true',
            Paras: {
              Name: 'Vue_resultLib',
              action: "getResultShowByQuery_MyCollect",
              Data: {
                Page: me.page,
                QueryStr: me.queryStr
              }
            },
            Callback: me.cb_do_query,
            Scope: me,
          });
        },
        do_query() {//查询ajax
          //getResultShowByQuery
          console.log('条件');
          let queryStr = {};   //选择条件
          // queryStr.ResultModel = ''
          // queryStr.TopticType = ''
          // queryStr.LevelType = ''
          // queryStr.GradeLevel = ''
          // queryStr.YearCode = ''
          // queryStr.Subject = ''
          // queryStr.LearnStage = ''
          queryStr.QueryKeyModel = this.queryTarg;  //下拉选择条件
          queryStr.QueryKey= this.queryText;  //输入框选择
          queryStr.OrderByStr = this.selectListL[this.selectOtherIndex];  //排序方式
          queryStr.IsDesc = this.IsDesc[this.selectOtherIndex];  //是否倒序
          queryStr.PageNum = 10;  //查询几条数据
          this.queryStr=queryStr
          this.do_queryCommon()
        },
        cb_do_query(resJson, scoped) {
          console.log('查询收藏结果', resJson)
          if(resJson.success){
            this.number=resJson.data.AllDataNumber
            if(resJson.data.Data.length>0){
              resJson.data.Data.forEach((item,index)=>{
                this.$set(item,"selected",false)
              })
              this.noDataShow=false
            }else {
              this.noDataShow=true
            }
            this.$store.commit("setQueryData",resJson.data)
            this.pages = resJson.data.Pages;
            this.page = resJson.data.crPage;
          }else {
            if(resJson.msg.indexOf('登录')>=0){
              this.$confirm({
                type:'温馨提示',
                msg:resJson.msg,
                btn:{
                  ok:'ok',
                  no:'no'
                }
              })
                .then(()=>{
                  localStorage.setItem("JumpKey", window.location.href);
                  this.$router.push('/BS_cgkLogin')
                })
                .catch(()=>{
                  this.$router.go(-1)
                })
            }else {
              this.$confirm({
                type:'温馨提示',
                msg:resJson.msg,
                btn:{
                  ok:'ok'

                }
              })
            }
          }
        },
        getCurPage(item){//分页组件传过来页数
          this.page=item
          this.do_queryCommon()
          window.scrollTo(0,0)
        }
      }
      // computed:{
      //   getQueryStr() {
      //     return this.$store.getters.getQueryStr
      //   },
      // }
    }
</script>

<style scoped>
@import "../../common/css/banner.css";
.banner{
  background: url("../../assets/commonImg/banner201974.png") center center no-repeat;
  background-size: 100% 100%;
}
.qureywrapper {
  background-color: white;
  height: 40px;
  line-height: 40px;
  margin-top: 10px;
}
.headerWrapper{
  margin-top: 10px;
}
  .qureywrapper .icon{
    flex: 0 0 70px;
    background-color: #418DFD;
    cursor: pointer;
  }
.qureywrapper .icon img{
  width: 25px;
  height: 25px;
}
  .input input{
    flex: 1;
    border: none;
    outline: none;
  }


.headerWrapper .qureywrapper{
  flex:1;
  height:40px;
  line-height: 40px;
  margin-top:20px;
  position: relative;
  background-color: white;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.headerWrapper .qureywrapper *{
  float:left
}
.headerWrapper .qureywrapper ul{
  width: 120px;
  height: 40px;
  line-height: 40px;
  position: relative;
  z-index: 999;
}
.headerWrapper .qureywrapper ul li{
  border: 1px solid gainsboro;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  width: 100%;
  text-align: center;
  cursor: pointer;
  border-top: none;
  background-color: white;
}
.headerWrapper .qureywrapper ul li:first-child, .headerWrapper .qureywrapper ul li:first-child:hover{
  border: none;
  left:0;
  background: url('../../assets/Home/xiala.png') 91%  no-repeat ;
  background-size: 11px 8px;
  position: relative;
  z-index: 999;
  color: black;
}
.headerWrapper .qureywrapper ul li:nth-of-type(2){
  border-top: 1px solid gainsboro;
}
.headerWrapper .qureywrapper ul li:first-child:after{
  content: '';
  position: absolute;
  height: 26px;
  width: 1px;
  background-color: #b7b7b7;
  right: 0;
  margin-top: 7px;
}
.headerWrapper .qureywrapper ul li:hover{
  background: #418EFD;
  color: white;
}

.headerWrapper .qureywrapper .input{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 120px;
  right: 50px;
}
.headerWrapper .qureywrapper .input input{
  padding-left: 11px;
  width: 100%;
  height: 40px;
  display: inline-block;
  border: none;
  outline: none
}
.icon{
  width: 80px;
  position: absolute;
  right: 0;
  height:40px;
  background: #418EFD;
  color: white;
  text-align: center;
  cursor: pointer;
}
.icon img{
  width: 26px;
  height: 26px;
}
.selectContent,.header{
  background-color: white;
}
.selectContent-bottom{
  background-color: white;
  height: 40px;
  line-height: 40px;
}
.selectContent-bottom li span{
  cursor: pointer;
}
.icon-xiala{
  font-size: 12px;
  margin-left: 3px;
}
.selectOtherClass{
  color: #418EFD;
}
.shang{
  transform: rotate(180deg) !important;
}
</style>
